<template>
  <div id="app">
    <Header :city="city" :cityId="weatherInfo.adcode" @refresh="handleRefresh"/>
    <Content :info="weatherInfo" @changeArea="handleChange"/>
  </div>
</template>

<script>
import Header from './components/Header'
import Content from './components/Content'
export default {
  name: "App",
  components: {
    Header,
    Content
  },
  data() {
    return {
      city: '深圳',
      weatherInfo: {}
    }
  },
  created() {
    this.getWeatherInfo()
  },
  methods: {
    //获取天气信息
    async getWeatherInfo(id=440305) {
      let { data: res } = await this.$http.get('https://restapi.amap.com/v3/weather/weatherInfo?key=c7da25161e50a59a57b103b8bc7bad2f&city='+ id)
      if(res.status != 1) {
        return alert('获取数据失败')
      }
      res.lives[0].reporttime = res.lives[0].reporttime.split(' ')[1].substring(0,5)
      this.weatherInfo = res.lives[0]
    },
    //处理获取过来的区域ID
    handleChange(cityId) {
      this.getWeatherInfo(cityId)
    },
    //处理子组件刷新事件
    handleRefresh(id) {
      this.getWeatherInfo(id)
    }
  }
};
</script>

<style>
  #app {
    width: 402px;
    margin: 0 auto;
    user-select: none;
  }
</style>
